<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }" @click.native="changeMenu('/')">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>图表统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <!--为Echarts准备一块Dom-->
        <el-col :span="12">
          <div id="campusTeacherCount" style="width: 600px; height: 400px;"></div>
        </el-col>
        <el-col :span="12">
          <div id="campusBookCount" style="width: 600px; height: 400px;"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Statistics',
  data () {
    return {
      bookList: []
    }
  },
  created () {
  },
  // DOM初始化完毕后的操作
  async mounted () {
    // 基于准备好的dom，初始化echarts实例
    const campusTeacherCountChart = echarts.init(document.getElementById('campusTeacherCount'), 'light')
    const campusBookCountChart = echarts.init(document.getElementById('campusBookCount'), 'light')
    // 显示加载动画
    campusTeacherCountChart.showLoading()
    campusBookCountChart.showLoading()
    // 初始化需要显示的数据
    let campusName = []
    let teacherNumber = []
    // 调用后端写的分类汇总接口获得分类后的返回数据
    const {data: teacher} = await this.$http.get('teacher/groupByCampusId')
    if (teacher.code !== 200) {
      return this.$message.error('获取信息失败！')
    }
    for (let i = 0; i < teacher.data.length; i++) {
      // 将后端返回的学院ID转换成学院名称（也可以不换）
      const {data: campus} = await this.$http.get(`campus/findByCampusIdEquals?campusId=${teacher.data[i].campusId}`)
      campusName.push(campus.data.campusName)
      teacherNumber.push(teacher.data[i].teacherNumber)
    }
    // 绘制图表
    campusTeacherCountChart.setOption({
      title: {
        text: '学院教师数量'
      },
      tooltip: {},
      // x轴参数 比方说 ['学院', '2学院', '哈哈学院']
      xAxis: {
        data: campusName
      },
      yAxis: {},
      // 每一个柱条对应数据 比方说 [1, 2, 3]
      series: [{
        name: '数量',
        type: 'bar',
        data: teacherNumber
      }]
    })
    // 关闭加载动画
    campusTeacherCountChart.hideLoading()

    // 初始化需要显示的数据
    let campusName2 = []
    let bookNumber = []
    const { data: res } = await this.$http.get('/campus/findAll')
    for (let i = 0; i < res.data.length; i++) {
      await this.selectByCampus(res.data[i].campusId)
      campusName2.push(res.data[i].campusName)
      bookNumber.push(this.bookList.length)
    }
    // 绘制第二个图表
    campusBookCountChart.setOption({
      title: {
        text: '学院出版图书数量'
      },
      tooltip: {},
      // x轴参数 比方说 ['学院', '2学院', '哈哈学院']
      xAxis: {
        data: campusName2
      },
      yAxis: {},
      // 每一个柱条对应数据 比方说 [1, 2, 3]
      series: [{
        name: '数量',
        type: 'bar',
        data: bookNumber
      }]
    })
    // 关闭加载动画
    campusBookCountChart.hideLoading()
  },
  methods: {
    async selectByCampus (campusId) {
      const { data: res } = await this.$http.get(`/teacher/findByCampusIdEquals?campusId=${campusId}`)
      this.bookList = []
      for (let i = 0; i < res.data.length; i++) {
        const {data: res2} = await this.$http.get(`/book/findByTeacherId?teacherId=${res.data[i].teacherId}`)
        if (res2.data.length === 0) {
          continue
        }
        for (let j = 0; j < res2.data.length; j++) {
          let authName = []
          let name = ''
          for (let k = 0; k < res2.data[j].author.length; k++) {
            const { data: teacher } = await this.$http.get(`/teacher/findByTeacherIdEquals?teacherId=${res2.data[j].author[k]}`)
            if (teacher.code === 404) {
              continue
            }
            if (k !== res2.data[j].author.length - 1) {
              name = teacher.data.teacherName + ' '
            } else {
              name = teacher.data.teacherName
            }
            authName.push(name)
          }
          res2.data[j].author = authName
        }
        this.bookList.push(res2.data[0])
        this.bookList = this.bookList.filter(n => n).sort(
          function (a, b) {
            return a.isbn > b.isbn ? 1 : -1
          }
        )
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
